import 'package:flutter/material.dart';

class Demo10 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new Demo10State();
  }
}

class Demo10State extends State<Demo10> with SingleTickerProviderStateMixin{
  AnimationController controller;
  Animation<double> animation;
  Animation<double> animation1;
  Animation<double> animation2;
  Animation<double> animation3;
  @override
  void initState() {
    super.initState();
    controller = new AnimationController(
      duration: const Duration(milliseconds: 3000), vsync: this);
    final Animation curve =
        new CurvedAnimation(parent: controller, curve: Curves.easeIn);
    animation = new Tween(begin: 0.0, end: 160.0).animate(curve)..addListener(() {
      setState(() {});// 这里调用setState方法但是不执行任何操作，只是为触发数据更新检查从而更新页面显示animation.value的更新值
    })..addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        //动画执行结束时反向执行动画
        controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        //动画恢复到初始状态时执行动画（正向）
        controller.forward();
      }
    });
    animation1 = new Tween(begin: 0.0, end: 160.0).animate(curve);
    animation2 = new Tween(begin: 0.0, end: 160.0).animate(curve);
    animation3 = new Tween(begin: 0.0, end: 160.0).animate(curve);
    controller.forward();// 执行动画
  }
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('动画简介'),
      ),
      body: new ListView(
        children: <Widget>[
          new ListTile(
            contentPadding: EdgeInsets.all(10),
            title: new Text('调用setState实现：'),
          ),
          new Center(
            child: new SizedBox(
              width: animation.value,
              height: animation.value,
              child: new Container(
                color: Colors.red,
              ),
            ),
          ),
          new ListTile(
            contentPadding: EdgeInsets.all(10),
            title: new Text('AnimatedWidget简化：'),
          ),
          new AnimateWidget(animation: animation1,),
          new ListTile(
            contentPadding: EdgeInsets.all(10),
            title: new Text('采用AnimatedBuilder：'),
          ),
          new AnimatedBuilder(
            animation: animation2,
            builder: (ctx, child) {
              return new Center(
                child: new SizedBox(
                  width: animation2.value,
                  height: animation2.value,
                  child: new Container(
                    color: Colors.green,
                  ),
                ),
              );
            },
          ),
          new ListTile(
            contentPadding: EdgeInsets.all(10),
            title: new Text('使用flutter封装好的Transition容器：'),
          ),
          new SizeTransition(
            sizeFactor: CurvedAnimation(parent: controller, curve: Curves.easeIn),
            child: new Center(
              child: new SizedBox(
                width: 160,
                height: 160,
                child: new Container(
                  color: Colors.red,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

class AnimateWidget extends AnimatedWidget {
  AnimateWidget({Key key, Animation animation}) : super(key: key, listenable: animation);
  @override
  Widget build(BuildContext context) {
    Animation animation = listenable;
    return new Center(
      child: new SizedBox(
        width: animation.value,
        height: animation.value,
        child: new Container(
          color: Colors.blue,
        ),
      ),
    );
  }
}